<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        *{
             margin: 0;
             padding: 0;
         }
        #left_menu{
            width: 200px;
        }
        /*清除列表符号*/
        #left_menu{
            list-style: none;
        }
        #left_menu .menu_title{
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #23C2FF;
            color: black;
            cursor: pointer;
        }
        #left_menu .menu_title:hover{
            background-color: aqua;
            color: #FF6724;
        }

        /*菜单项的样式，主要给a设置*/
        #left_menu .menu_item a{
            text-decoration: none;
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color:#80CCDE ;
            border-bottom:1px aliceblue solid ;
        }
        #left_menu .menu_item a:hover{
            background-color: cadetblue;
            color: wheat;
        }

        .menu_item{
            display: none;

        }

    </style>
</head>
<body>
<div id="left_menu">
<!--    收入菜单开始-->
    <div class="menu_title" onclick="show(1)">
    收入维护
</div>
    <div class="menu_item" id="item_01" >
        <ul>
            <li>
                <a href="income.html" target="main">增加收入</a>
            </li>
            <li>
                <a href="selectsell.html" target="main">查询收入</a>
            </li>
            <li>
                <a href="">编辑收入类型</a>
            </li>
        </ul>
    </div>
    <!--    支出菜单开始-->

    <div class="menu_title"  onclick="show(2)">
        支出维护
    </div>
    <div class="menu_item" id="item_02">
        <ul>
            <li>
                <a href="">增加支出</a>
            </li>
            <li>
                <a href="">查询支出</a>
            </li>
            <li>
                <a href="">编辑支出类型</a>
            </li>
        </ul>
    </div>
<!--    支出菜单结束-->

<!--    个人信息维护-->

    <div class="menu_title" onclick="show(3)">
        个人信息维护
    </div>
    <div class="menu_item" id="item_03" >
        <ul>
            <li>
                <a href="">修改密码</a>
            </li>
            <li>
                <a href="">修改个人信息</a>
            </li>

        </ul>
    </div>
</div>
</body>
<script>
    //当点击右键时，触发快捷菜单
    document.oncontextmenu = function (event) {
        //关闭默认操作；
        event.preventDefault();

    }

    function show(n) {
        var item = document.getElementById("item_0"+n);
        var f= item.style.display;
        var items = document.querySelectorAll(".menu_item");
        for (let i = 0; i < items.length; i++) {
            items[i].style.display="none";
        }
        if (f==null||f==''||f=="none") {
            item.style.display = "block";
        }else{

            item.style.display = "none"
        }
    }
</script>
</html>